<template>
  <div style="marquee: v-bind(111)">
    ttttt

<avatar></avatar>
    <marquee behavior="scroll" direction="vertical">888</marquee>
h：标题标签





    <h2>方案1 全是span</h2>
    <div class="parent-1">
      <span class="">
        位置：
      </span>
      <span class="">{{ parent.content }}</span>

    </div>
    <h2>方案2 flex</h2>
    <div class="parent-2">
      <div class="title-2">
        位置：
      </div>
      <div class="parent-content">{{ parent.content }}</div>
    </div>
    <h2>方案3 float</h2>
    <div class="parent-3">
      <div class="title-3">
        位置：
      </div>
      <div class="content-3">{{ parent.content }}</div>
    </div>
    <!--    {{name}},{{age}}-->
    <!--    <button @click="changeName('李四')">changeName</button>-->
    <!--    <button @click="setAge(18)">setAge</button>-->
  </div>
</template>

<script>
// import {state,mutations} from './test.js'
import {count, increase,deepClone} from './moduleA'
import Avatar from "./avatar.vue";

export default {
  components: {Avatar},
  data() {
    return {
      parent: {
        content: '湖北省荆门市东宝区漳河镇漳河旅游公路333号45楼'
      },
      key: 1
    }
  },
  mounted() {
    let value = 2
    console.log('这里调用', count, increase())
    let testObj = {
      name: 'xiaom',
      age: 12,
      arr:[1,2,4],
      n:null,
      un:undefined,
      obj: {
        b: 2
      },
      see() {

      },
    }
    let resObj=deepClone(testObj)
    resObj.obj.b=3
    console.log('这里调用arr', testObj,resObj )
    let a = [1, 2, 3, 4, 5]
    /**
     * current:数组当前项目
     * index：数组当前下标
     * array：数组本身
     * @type {number[]}
     */
    let b = a.filter((current, index, array) => current < 10)
    // foreach和map的区别

    Array.prototype.forEach.call(a, (item, index, arr) => {
      if (item < 4) {
        console.log('这里来了')
        arr[index] = 6
      }
      console.log('item===', item, index, arr)
      return 9
    })

    console.log('下面map')
    a.map((item, index, arr) => {

    })


    const refObject = {
      get value() {
        // track(refObject, 'value')
        return value
      },
      set value(newValue) {
        value = newValue
        // trigger(refObject, 'value')
      }
    }
  },
  computed: {
    // name(){
    // return state.name
    // },
    // age() {
    // return state.age
    // }
  },
  methods: {


    // changeName: mutations.changeName,
    // setAge:mutations.setAge,
  }
}
</script>

<style>
.parent-1 {
  border: chocolate 1px solid;
  width: 200px;
}

.parent-2 {
  width: 200px;
  border: chocolate 1px solid;
  display: flex;
}

.parent-content {
  width: fit-content;
}

.title-2 {
  flex-shrink: 0;
  width: 20px;
}

.parent-3 {
  width: 200px;
  border: chocolate 1px solid;
  text-align: center;
}

.title-3 {
  float: left;
}

@media screen {

}
</style>